<template>
  <div class="container">
    <div class="app-container">
    <!-- 卡片区域 -->
    <el-card shadow="never" class="box-card">
      <el-form :model="randoms" ref="subjectRef">
        <div class="filter-container">
          <!-- 表格 -->
          <el-form-item class="container-form">
            <span style="container-text">关键字</span>
            <el-input
              @keyup.enter="handleFilter"
              style="width: 200px"
              class="filter-item"
              v-model="randoms.keyword"
            ></el-input>

            <el-button
              class="filter-item fr form-marginleft"
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
              >搜索</el-button
            >
            <el-button class="filter-item fr" size="small" @click="resetForm"
              >清除</el-button
            >
          </el-form-item>
          <!-- 提示总共条数 -->
          <el-alert
            :title="'数据一共 ' + list.counts + ' 条'"
            type="info"
            show-icon
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table stripe :data="list.items" style="width: 100%">
          <el-table-column align="center" width="185px" prop="id" label="编号">
          </el-table-column>
          <el-table-column
            width="100px"
            align="center"

            label="题型"
          >
            <template slot-scope="scope">
              <div v-for="item in questionType" :key="item.value">
                <span v-if="scope.row.questionType == item.value">{{
                  item.label
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="200px"
            align="center"
            prop="id"
            label="题目编号"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                v-for="(item, index) in scope.row.questionIDs"
                :key="index"
                @click="handModify(scope.row,index)"
                >{{ item.number }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="addTime" label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.addTime | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column
            width="130px"
            align="center"
            prop="totalSeconds"
            label="答题时间(s)"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="accuracyRate"
            label="正确率(%)"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="80px"
            prop="userName"
            label="录入人"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="removeSubjects(scope.row)"
                circle
                plain
              ></el-button>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="randoms.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.counts"
        >
        </el-pagination>
      </el-form>
    </el-card>
    <!-- 弹出层 -->
    <el-dialog title="题目预览" :visible.sync="isdialogPreview" width="70%">
      <QuestionsPreview v-if="isdialogPreview" :previewId="randomId"  @close="isdialogPreview=false"></QuestionsPreview>
    </el-dialog>
    <!-- 弹出层 -->
  </div>
  </div>
</template>

<script>
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
// eslint-disable-next-line no-unused-vars
import { questionType } from '@/api/hmmm/constants.js'
import { randoms as randomsList, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  name: 'Random',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      randoms: {
        page: 1, // 页码
        pagesize: 5, // 条数
        keyword: '' // 搜索昵称
      },
      // 数据列表
      list: [],
      questionType,
      //
      isdialogPreview: false,
      // 试题id
      randomId: null
    }
  },
  mounted () {},
  created () {
    this.getLIst()
  },
  methods: {
    // 获取组题列表
    async getLIst () {
      try {
        const { data } = await randomsList(this.randoms)
        this.list = data
        // console.log(data)
      } catch (error) {
        this.$message.error('获取失败')
        console.log(error)
      }
    },
    // 搜索信息
    handleFilter () {
      this.getLIst()
      setTimeout(() => {
        this.randoms.keyword = ''
      }, 0)

      // this.resetForm()
    },
    // 重置
    resetForm () {
      this.randoms.keyword = ''
    },
    // 每页条数改变触发
    handleSizeChange (val) {
      this.randoms.pagesize = val
      // console.log(`每页 ${val} 条`)
      this.getLIst()
    },
    // 页数改变触发
    handleCurrentChange (val) {
      this.randoms.page = val
      // console.log(`当前页: ${val}`)
      this.getLIst()
    },
    // 删除组题
    removeSubjects (row) {
      // console.log(row.id)
      this.$confirm('此操作将永久删除该组题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({
          id: row.id
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getLIst()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handModify (row, index) {
      // console.log(row)
      this.isdialogPreview = true
      this.randomId = row.questionIDs[index].id
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  /deep/.el-form-item__content {
    font-size: 20px;
    font-weight: 700 !important;
    color: #606266;
  }
  /deep/.el-input__inner {
    margin-left: 15px;
  }
  .form-marginleft {
    margin-left: 20px;
  }
}
</style>
